<template>
  <div>
    <router-view v-if="flag" />
    <div v-else>
      <el-tabs v-model="activeName"  @tab-click="handleClick">
        <el-tab-pane
          v-for="v in deptData"
          :key="v.id"
          :label="v.name"
          :name="v.id"
        ></el-tab-pane>
      </el-tabs>
      <Search />
      <List v-if="activeName" :scope="activeName" />
      <Add v-if="activeName" :scope="activeName" />
    </div>
  </div>
</template>
<script>
import { openApiSysDeptQuery } from "@/api/openApi";
import Bus from "@/utils/bus.js";
export default {
  components: {
    List: () => import("./List.vue"),
    Search: () => import("./Search.vue"),
    Add: () => import("./Add.vue"),
  },
  data() {
    return {
      flag: false,
      activeName: "",
      deptData: [],
    };
  },
  watch: {
    $route(v) {
      this.flag = v.meta.flag;
    },
  },
  mounted() {
    this.flag = this.$route.meta.flag;
    this.getList();
  },
  methods: {
    getList() {
      openApiSysDeptQuery({ pId: 0 }).then((res) => {
        this.deptData = res.data.data;
        this.activeName = this.deptData[0].id;
        // console.log(this.activeName);
      });
    },
    handleClick() {
      Bus.$emit("refreshFlowList", {scope: this.activeName});
    },
  },
};
</script>